<template>
   <el-card>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item>
    <el-input v-model="formInline.user" placeholder="用户名"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" icon="el-icon-search" >查询</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary">清空</el-button>
  </el-form-item>
</el-form>
    <div>
    <el-button type="primary" @click="tianJia" >添 加</el-button>
    <el-button type="danger" plain :disabled="this.selectArr.length === 0" @click="deletes">批量删除</el-button>
   </div>
    <el-table
    :data="this.tableState.users"
    @selection-change="handlerselectChage"
    style="width: 100%"
    max-height="250"
    stripe
    >
    <el-table-column type="selection"  width="55" ></el-table-column>
    <el-table-column
      fixed
      label="序号"
      width="80"
      type="index"
      align="center">
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户名"
      width="150">
    </el-table-column>
    <el-table-column
      prop="nickName"
      label="用户昵称"
      width="200">
    </el-table-column>
    <el-table-column
      prop="roleName"
      label="角色列表"
      width="180">
    </el-table-column>
    <el-table-column
      prop="gmtCreate"
      label="创建时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="gmtModified"
      label="更新时间"
      width="180">
    </el-table-column>
    <el-table-column label="操作" width="200" align="center" fixed="right">
      <template v-slot="{row}">
        <el-button icon="el-icon-user" size="mini" type="info" @click="getRoles(row)" ></el-button>
        <el-button icon="el-icon-edit-outline" size="mini" type="primary" @click="xiuGai(row)"></el-button>
        <el-button icon="el-icon-delete" size="mini" type="danger" @click="deleteOne(row)"></el-button>
        </template>
      </el-table-column>
  </el-table>
<el-dialog :title="isPass? '添加用户':'修改用户'" :visible.sync="dialogFormVisible" top="0px">
  <el-form :rules="rules" :model="ruleForm"  ref="ruleForm" class="demo-ruleForm">
    <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
      <el-input   v-model="ruleForm.username" ></el-input>
    </el-form-item>
    <el-form-item label="用户昵称" :label-width="formLabelWidth">
      <el-input v-model="ruleForm.nickname"></el-input>
    </el-form-item>
    <el-form-item label="用户密码" :label-width="formLabelWidth" prop="userspassword" v-show="isPass">
      <el-input  v-model="ruleForm.userspassword"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    
    <el-button  @click="resetForm('ruleForm')">取 消</el-button>
    <el-button type="primary" @click="saveUser('ruleForm')">确 定</el-button>
  </div>
</el-dialog>
<el-dialog title="设置角色" :visible.sync="dialogFormVisibletwo" top="0px">
  <el-form>
    <el-form-item label="用户名" :label-width="formLabelWidth" prop="username" >
      <el-input v-model="dusername" disabled></el-input>
    </el-form-item>
    <el-form-item label="角色列表">
       <el-checkbox :indeterminate="checkRoles.isIndeterminate" v-model="checkRoles.checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkRoles.checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in checkRoles.cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
      </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
     
    <el-button  @click="dialogFormVisibletwo = false">保 存</el-button>
    <el-button type="primary" @click="dialogFormVisibletwo = false">取 消</el-but
    ton>
  </div>
</el-dialog>
<div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.tableState.total">
    </el-pagination>
  </div>
  
   </el-card>
   
</template>

<script>
import userApi from "@/api/acl/user"
 
export default {
    name: "User",
    data() {
      return {
        checkRoles:{
        checkAll: false,
        checkedCities: [],
        cities:['上海', '北京', '广州', '深圳'],
        isIndeterminate: true
        },
        formInline: {
          user: '',
          region: ''
        },
        dusername:''
        ,
        selectArr:[],
        updateid:'',
        isPass:true,
        dialogTableVisible: false,
        dialogFormVisible: false,
        dialogFormVisibletwo:false,
        formLabelWidth: '100px',
        paramsState:{
           username: '',
           searchUsername: '',
           page:1,
           limit:5
        },
        tableState:{
          total:0,
          users:[],
          selectedIds:[]
        },
        currentPage: 1,
        ruleForm: {
          username: '',
          nickname:'',
          userspassword: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
          ],
          userspassword: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
      }
      
    },
    created(){
      this.getUsers()
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkRoles.checkedCities = val ? this.checkRoles.cities : [];
        this.checkRoles.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkRoles.checkAll = checkedCount === this.checkRoles.cities.length;
        this.checkRoles.isIndeterminate = checkedCount > 0 && checkedCount < this.checkRoles.cities.length;
      },
      async getRoles(row){
        this.checkRoles.cities = []
        this.dialogFormVisibletwo = true
        // console.log(row)
        this.checkRoles.checkedCities = row.roleName.split(',')
        this.dusername = row.username
       const result =await this.roles(row.id)
        console.log(row) 
        const arr = result.data.allRolesList
        // console.log(arr)
       arr.map((item)=>{
           this.checkRoles.cities.push(item.roleName)
        })
      },
      deletes(){
        const arr = []
        this.selectArr.forEach(item => {
          arr.push(item)
        })
        console.log(arr)
        this.deleteMore(arr)
      },
        handlerselectChage(selection){
        this.selectArr = selection.map((item)=> item.id)
        console.log(this.selectArr)
        this.getUsers()
      },
     async xiuGai(row){
         const result = await this.getUserInfo(row.id)
         console.log(result.data.item.id)
         this.updateid = result.data.item.id
        // this.ruleForm.username = result.item.id
        this.ruleForm.username = result.data.item.username
        this.ruleForm.nickname = result.data.item.nickName
        this.dialogFormVisible = true
        this.isPass = false
        
      },
      tianJia(){
         this.ruleForm.username = ''
         this.ruleForm.nickname = ''
        this.dialogFormVisible = true
        this.isPass = true
      },
      deleteOne(row){
        this.deleteOneTodo(row.id)
      },
    async getUsers(page = this.paramsState.page, limit= this.paramsState.limit){
          // this.paramsState.page = page
          // this.paramsState.limit = limit
          const result = await userApi.getPageList(page, limit, {username:this.paramsState.searchUsername})
          console.log(result)
          const { items, total } = result.data
          console.log(total)
          this.tableState.total = total
          this.tableState.users = items
          this.tableState.selectedIds = []
      },
      async addUser(user){
          user = {
            username:this.ruleForm.username,
            nickName:this.ruleForm.nickname,
            password:this.ruleForm.userspassword
          }
          await userApi.add(user)
      },
      async getUserInfo(id){
          return await userApi.getById(id)
      },
      async updateUser(user){
        await userApi.update(user)
      },
      async deleteOneTodo(id){
        await userApi.removeById(id)
      }
      ,
      async deleteMore(ids){
        await userApi.removeUsers(ids)
      },
      async roles(userid){
        return await userApi.getRoles(userid)
       
      }
      ,
      onSubmit() {
        console.log('submit!');
      },
      handleSizeChange(val){
        console.log(`每页 ${val} 条`);
        this.paramsState.limit = val
        this.getUsers()
      },
      handleCurrentChange(val){
        console.log(`当前页: ${val}`);
        // this.currentPage = val
        this.paramsState.page = val
        this.getUsers()
      //  console.log(this.currentPage)
      //  console.log(this.$store)
    // console.log(this.paramsState.page)

      },
      resetForm(formName){
        this.$refs[formName].resetFields();
        console.log(this.$refs[formName])
        this.dialogFormVisible = false
      },
      saveUser(formName){
        if(!this.isPass){
          let updateObj = {
            id:this.updateid,
            username:this.ruleForm.username,
            nickName:this.ruleForm.nickname
          }
          this.updateUser(updateObj)
          this.dialogFormVisible = false
          this.getUsers()
        }else{
           this.addUser()
        console.log(this.ruleForm)
        this.$refs[formName].resetFields();
        this.dialogFormVisible = false
        this.getUsers()
        }
       
      }
    }
}
</script>

<style scoped>
    span{
        position: relative;
        top: 30px;
        left: 25px;
        color: red;
        font-size: 15px;
    }
</style>